
var arr = [];
var carArr = [];
window.onload = function () {
    showGoodslist(getLocalGoodsListData());
    render(getLocalCartData());
}
function getLocalGoodsListData() {
    arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
    return arr;
}
function getLocalCartData() {
    carArr = localStorage.carArr ? JSON.parse(localStorage.carArr) : [];
    return carArr;
}
function showGoodslist(arr) {
    var list_ul = document.querySelector(".list_ul");
    list_ul.innerHTML = "";
    for (var i = 0; i < arr.length; i++) {
        list_ul.innerHTML += ` 
           <li data-id="${arr[i].goodsid}">
              <img src="${arr[i].image}">
              <div classs="good_title mt3">
                ${arr[i].name}
              </div>
              <div class="price mt5">
                ${arr[i].price}元
              </div>
              <button type="button" class="btn_add mt5" onclick='addCart("${arr[i].goodsid}","${arr[i].image}","${arr[i].name}","${arr[i].price}")'>
                 加入购物车
              </button>
            </li>
        `;
    }
}

function addCart(goodsId, img, goodsName, price) {
    var count = 1;
    var xiaoji = price / 1 * count;
    var obj = {
        id: goodsId,
        src: img,
        title: goodsName,
        price: price,
        count: count,
        xiaoji: xiaoji.toFixed(2),
        time: new Date().toLocaleTimeString()
    }
    addData(obj);
}
function addData(obj) {
    carArr = getLocalCartData();
    var result = carArr.some(function (item, index) {
        return item.id == obj.id;
    })
    if (result) {
        jia(obj.id);
        return;
    }
    carArr.push(obj);
    localStorage.carArr = JSON.stringify(carArr);
    render(carArr);
}

function render(carArr) {
    var tbody = document.querySelector("tbody");
    tbody.innerHTML = "";
    var str = "";
    var sum = 0;
    for (var i = 0; i < carArr.length; i++) {
        str += `
         <tr>
            <td>
            <input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${carArr[i].id}"/>
            </td>
            <td>
                <p>
                    <img src="${carArr[i].src}" >
                    <br>
                    <span>${carArr[i].title}</span>
                </p>
            </td>
            <td>
                <button type="button" class="btn" onclick="jian(${carArr[i].id})">-</button>
                <input disabled type="number" name="" id="" value="${carArr[i].count}" class="count"/>
                <button type="button" class="btn" onclick="jia(${carArr[i].id})">+</button>
            </td>
            <td>
                <span>${carArr[i].price}元</span>
            </td>
            <td>
                ${carArr[i].xiaoji}
            </td>
            <td>
                <button type="button" onclick="del(${carArr[i].id})">删除</button>
            </td>
            <td>
                ${carArr[i].time}
            </td>
         </tr>
        `
        sum = (sum / 1 + carArr[i].xiaoji / 1).toFixed(2);
    }
    tbody.innerHTML = str;
    document.getElementById("sum").innerHTML = sum;
}

function jian(id) {
    carArr = getLocalCartData();
    carArr.forEach(function (item, index) {
        if (item.id == id) {
            if (item.count > 1) {
                item.count--;
                item.xiaoji = (item.count * item.price).toFixed(2);
            }
        }
    })
    localStorage.carArr = JSON.stringify(carArr);
    render(carArr);
}
function jia(id) {
    carArr = getLocalCartData();
    carArr.forEach(function (item, index) {
        if (item.id == id) {
            if (item.count < 5) {
                item.count++;
                item.xiaoji = (item.count * item.price).toFixed(2);
            }
        }
    })
    localStorage.carArr = JSON.stringify(carArr);
    render(carArr);
}
function del(id) {
    carArr = getLocalCartData();
    carArr = carArr.filter(function (item, index) {
        return item.id != id;
    })
    localStorage.carArr = JSON.stringify(carArr);
    render(getLocalCartData());
}

var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function () {
    var danxuan = document.querySelectorAll(".danxuan");
    for (var index = 0; index < danxuan.length; index++) {
        danxuan[index].checked = quanxuan.checked;
    }
}

var delChecked = document.getElementById("delChecked");
delChecked.onclick = function () {
    carArr = getLocalCartData();
    var danxuan = document.querySelectorAll(".danxuan:checked");
    for (var i = 0; i < danxuan.length; i++) {
        carArr.forEach(function (item, index) {
            if (item.id === danxuan[i].getAttribute("data-id")) {
                carArr.splice(index, 1);
            }
        })
    }
    localStorage.carArr = JSON.stringify(carArr);
    render(getLocalCartData());
}
